<template>
    <div class="sideBar">
        <el-menu
            class="sideBar-el-menu"
            :default-active="onRoutes"
            :collapse="collapse"     
            background-color="#334256"      
            text-color="#ffffff"
            active-text-color="#20a0ff"
            router
        >
            <template v-for="item in items">
                <el-menu-item :index="item.index" :key="item.index">
                    <i :class="item.icon"></i>
                    {{item.title}}
                </el-menu-item>
            </template>
        </el-menu>
    </div>
    
</template>


<script>
export default {
    data () {
        return {
            collapse: false,
            items: [
                {
                    icon: 'el-icon-document',
                    index: 'Info',
                    title: '系统首页'
                },
                {
                    icon: 'el-icon-document',
                    index: 'Consumer',
                    title: '用户管理'
                },
                {
                    icon: 'el-icon-document',
                    index: 'Singer',
                    title: '歌手管理'
                },
                {
                    icon: 'el-icon-document',
                    index: 'SongList',
                    title: '歌单管理'
                },
            ]
        }      
    },
    computed: {
        onRoutes () {
            // 获取当前组件对象的路由对象的属性path,并且去除掉字符"/"
            return this.$route.path.replace('/','')
        }
    },

    mounted () {
        // 绑定监听,用于控制菜单的关闭和展开
        this.$bus.$on('collapse',() => {
            this.collapse = !this.collapse 
        })
    }
}
</script>


<style scoped lang="less">
    .sideBar{
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0;
        background-color: #334256;
        overflow-y: scroll;
        .sideBar-el-menu::not(.el-menu-collapse){
            width: 150px;
        }
    }

</style>